<template>
    <div class="testing">
      <div class="testingReport relative testingNone">
        <div class="reportText">种植家缓释掺混肥</div>
          <div class="reportContent">
            <div> 生产厂家：华强化工股份有限公司</div>
            <div class="greenColor" @click="open(1)">
                <div v-if="isOpen.includes(1)">
                    收起
                    <van-icon name="arrow-down" />
                </div>
                <div v-else>
                    展开
                    <van-icon name="arrow-up" />
                </div>
            </div>
        </div>
       <div v-if="isOpen.includes(1)">
        <img class="investment pTip" src="@/assets/investment1-1.png" />
        <div class="pTip">
            <van-divider
                :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }"
            >绿色种养循环</van-divider>
        </div>
        <div class="pTip flexHalf">
            <div>
                <img class="investmentTag" src="@/assets/investment1.png" />
                <div>氮</div>
            </div>
            <div>
                <img class="investmentTag" src="@/assets/investment2.png" />
                <div>磷</div>
            </div>
            <div>
                <img class="investmentTag" src="@/assets/investment3.png" />
                <div>钾</div>
            </div>
            <div>
                <img class="investmentTag" src="@/assets/investment4.png" />
                <div>缓释剂</div>
            </div>
        </div>
        <div class="pTip">
            <van-divider
                :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }"
            >产品信息</van-divider>
        </div>
        <div class="greenProduct pTop">
            <div>
                <div class="greyColor">
                    产品类别：
                </div>
                <div>复合肥料</div>
            </div>
            <div>
                <div class="greyColor">
                    规格：
                </div>
                <div>50 KG/袋</div>
            </div>
            <div>
                <div class="greyColor">
                    登记证号：
                </div>
                <div>HBFHFL2021</div>
            </div>
            <div>
                <div class="greyColor">
                    供应商：
                </div>
                <div>杭州农得惠农资有限公司</div>
            </div>
            <div>
                <div class="greyColor">
                    产品形态：
                </div>
                <div>颗粒</div>
            </div>
        </div>
       </div>
      </div>
      <div class="testingReport relative testingNone pTip">
        <div class="reportText">钱江绿有机肥料</div>
          <div class="reportContent">
            <div> 生产厂家：农浓生物工程有限公司</div>
            <div class="greenColor" @click="open(2)">
               <div v-if="isOpen.includes(2)">
                    收起
                    <van-icon name="arrow-down" />
               </div>
               <div v-else>
                    展开
                    <van-icon name="arrow-up" />
                </div>
            </div>
        </div>
        <div v-if="isOpen.includes(2)">
            <img class="investment pTip" src="@/assets/investment.png" />
            <div class="pTip">
                <van-divider
                    :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }"
                >绿色种养循环</van-divider>
            </div>
            <div class="pTip flexHalf">
                <div>
                    <img class="investmentTag" src="@/assets/investment1.png" />
                    <div>氮</div>
                </div>
                <div>
                    <img class="investmentTag" src="@/assets/investment2.png" />
                    <div>磷</div>
                </div>
                <div>
                    <img class="investmentTag" src="@/assets/investment3.png" />
                    <div>钾</div>
                </div>
                <div>
                    <img class="investmentTag" src="@/assets/investment4.png" />
                    <div>有机质</div>
                </div>
            </div>
            <div class="pTip">
                <van-divider
                    :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }"
                >产品信息</van-divider>
            </div>
            <div class="greenProduct pTop">
                <div>
                    <div class="greyColor">
                        产品类别：
                    </div>
                    <div>微生物有机肥</div>
                </div>
                <div>
                    <div class="greyColor">
                        规格：
                    </div>
                    <div>50 KG/袋</div>
                </div>
                <div>
                    <div class="greyColor">
                        登记证号：
                    </div>
                    <div>HBFHFL2021</div>
                </div>
                <div>
                    <div class="greyColor">
                        供应商：
                    </div>
                    <div>杭州农得惠农资有限公司</div>
                </div>
                <div>
                    <div class="greyColor">
                        产品形态：
                    </div>
                    <div>粉剂</div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </template>

<script>
import {
  getpesticideResiduesByIdApi,
  getSamplingReportByIdApi
} from '@/api/tracing'
import line from './echart/line'
export default {
  name: 'ShuzhongtianH5Testing',

  data () {
    return {
      line,
      params: {
        soilids: '', // 土壤
        waterids: '', // 水质
        pesticideids: '' // 农残
      },
      soilReport: [],
      watherReport: [],
      pesticideRepost: [],
      reportList: [],
      reportShow: false,
      isOpen: [1]
    }
  },

  mounted () {
    // if (this.$store.state.suyuan.soilids !== null && this.$store.state.suyuan.soilids !== '') {
    //   this.params.soilids = this.$store.state.suyuan.soilids.split(',')
    // }
    // if (this.$store.state.suyuan.waterids !== null && this.$store.state.suyuan.waterids !== '') {
    //   this.params.waterids = this.$store.state.suyuan.waterids.split(',')
    // }
    // if (this.$store.state.suyuan.pesticideids !== null && this.$store.state.suyuan.pesticideids !== '') {
    //   this.params.pesticideids =
    //       this.$store.state.suyuan.pesticideids.split(',')
    // }
    // this.getReportUrl()
    // this.myEcharts()
  },

  methods: {
    open (index) {
      if (this.isOpen.includes(index)) {
      // 如果已经包含，则移除
        this.isOpen = this.isOpen.filter(i => i !== index)
      } else {
      // 如果不包含，则添加
        this.isOpen.push(index)
      }
    },
    async getReportUrl () {
      // 土壤
      if (this.params.soilids !== '' && this.params.soilids !== null) {
        for (let i = 0; i < this.params.soilids.length; i++) {
          const res = await getSamplingReportByIdApi({
            id: this.params.soilids[i],
            reportType: 0
          })
          this.soilReport.push(res.data)
        }
      }
      // 水质
      if (this.params.waterids !== '' && this.params.waterids !== null) {
        for (let i = 0; i < this.params.waterids.length; i++) {
          const res1 = await getSamplingReportByIdApi({
            id: this.params.waterids[i],
            reportType: 1
          })
          this.watherReport.push(res1.data)
        }
      }
      // 农残
      if (
        this.params.pesticideids !== '' &&
          this.params.pesticideids !== null
      ) {
        for (let i = 0; i < this.params.pesticideids.length; i++) {
          console.log(this.params.pesticideids)
          const res2 = await getpesticideResiduesByIdApi(
            this.params.pesticideids[i]
          )
          this.pesticideRepost.push(res2.data)
          console.log(this.pesticideRepost)
        }
      }
      this.reportList.push(...this.soilReport, ...this.watherReport)
      if (this.reportList !== null && this.pesticideRepost !== null) {
        this.reportShow = false
      } else {
        this.reportShow = true
      }
      console.log(this.reportList, '水质土壤')
      console.log(this.pesticideRepost, '农残')
    },
    openReport (pdf) {
      window.open(pdf, '_blank')
    }
  }
}
</script>
  <style lang="scss" scoped>
  .testing {
    padding: 1.5vh 3.2vw 2vh;
  }
  .testingReport {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 2vh 3vw;
    border-radius: 1vw;
    .reportImage {
      height: 8vh;
      margin-right: 2vw;
    }
    .reportText {
      font-size: 4.2vw;
      font-weight: bold;
    }
    .reportContent {
      margin-top: 0.7vh;
      line-height: 2.2vh;
      font-size: 12px;
      color: #999999;
      display: flex;
      justify-content: space-between;
    }
    .arrowRight {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 2.5vw;
      margin: auto;
      width: 5.5vw;
      height: 5vw;
    }
    .pTop {
      margin-top: 1.2vh !important
    }
  }
  .testingNone {
    display: block;
    .reportContent  {
      width: 100%;
    }
  }
  .greenColor {
    color: #19B560
  }
  .pTip {
    margin-top: 1.6vh !important;
    .van-divider {
        font-size: 12px;
        width: 80%;
        margin: auto
    }
  }
  .flexHalf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
        border-top-left-radius: 21vw;
        border-top-right-radius: 21vw;
        border-bottom-left-radius: 2vw;
        border-bottom-right-radius: 2vw;
        padding: 6px 0 10px 0;
        background: #2BC974;
        width: 17.5vw;
        font-size: 10px;
        color: #fff;
        text-align: center;
        img {
            width: 15vw;
            height: 15vw;
            margin-bottom: 5px;
        }
    }
  }
  .greenProduct {
    background: #E8F8EF;
    padding: 1.5vh 2.5vw 0;
    font-size: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    > div:nth-child(3n + 1) {
        width: 43%;
        margin-bottom: 1.5vh;
    }
    > div {
        width: 28.5%;
        margin-bottom: 1.5vh;
    }
    .greyColor {
      color: #999999;
      margin-bottom: 5px;
    }
  }
  .investment {
    width: 100%;
  }
  </style>
